<template>
  <div class="app-container">
    <el-dialog :title="title" :visible.sync="detailvisible" width="1400px">
      <template v-if="billType === '报损' || billType === '报溢' || billType === '报损出库' || billType === '报溢入库'">
           <el-row :gutter="24" align="middle">
             <el-col :span="6">
               单据日期：{{model.operTimeStr}}
             </el-col>
             <el-col :span="6">
               单据编号：{{model.number}}
             </el-col>
             <el-col :span="6">
               合计:{{model.changeAmount}}
             </el-col>
             <el-col :span="6">
             </el-col>
           </el-row>
           <br />
           <el-table border :data="tableData" style="width: 100%">
             <el-table-column prop="depotName" label="仓库名称">
             </el-table-column>
             <el-table-column prop="barCode" label="条码">
             </el-table-column>
             <el-table-column prop="name" label="名称">
             </el-table-column>
             <el-table-column prop="standard" label="规格">
             </el-table-column>
             <el-table-column prop="model" label="型号">
             </el-table-column>
             <el-table-column prop="color" width="60" label="颜色">
             </el-table-column>
             <el-table-column prop="materialOther" label="扩展信息">
             </el-table-column>
             <el-table-column prop="stock" width="60" label="库存">
             </el-table-column>
             <el-table-column prop="unit" width="60" label="单位">
             </el-table-column>
             <el-table-column prop="snList" label="序列号">
             </el-table-column>
             <el-table-column prop="batchNumber" label="批号">
             </el-table-column>
             <el-table-column prop="expirationDate" label="有效期">
             </el-table-column>
             <el-table-column prop="sku" label="多属性">
             </el-table-column>
             <el-table-column prop="operNumber" width="60" label="数量">
             </el-table-column>
             <el-table-column prop="unitPrice" width="60" label="单价">
             </el-table-column>
           <!--  <el-table-column prop="taxUnitPrice" width="80" label="含税单价">
             </el-table-column> -->
             <el-table-column prop="allPrice" width="60" label="金额">
             </el-table-column>
             <el-table-column prop="taxRate" width="70" label="税率">
             </el-table-column>
             <el-table-column prop="taxMoney" width="70" label="税额">
             </el-table-column>
             <el-table-column prop="taxLastMoney" label="价税合计">
             </el-table-column>
             <el-table-column prop="remark" label="备注">
             </el-table-column>
           </el-table>
           <el-row :gutter="24" align="middle">
             <el-col>
               备注： {{model.remark}}
             </el-col>
           </el-row>
           <br />
           <div slot="footer" class="dialog-footer">
             <!-- <el-button type="primary" @click="openPrintDetail()">打印预览</el-button> -->
             <el-button @click="detailvisible = false">取消</el-button>
           </div>
         </template>

      <template v-if="billType === '销售出库'">
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            客户：{{model.organName}}
          </el-col>
          <el-col :span="6">
            单据日期：{{model.operTimeStr}}
          </el-col>
          <el-col :span="6">
            单据编号：{{model.number}}
          </el-col>
          <el-col :span="6">
            关联订单：{{model.linkNumber}}
          </el-col>
        </el-row>
        <br />
        <el-table border :data="tableData" style="width: 100%">
          <el-table-column prop="depotName" label="仓库名称">
          </el-table-column>
          <el-table-column prop="barCode" label="条码">
          </el-table-column>
          <el-table-column prop="name" label="名称">
          </el-table-column>
          <el-table-column prop="standard" label="规格">
          </el-table-column>
          <el-table-column prop="model" label="型号">
          </el-table-column>
          <el-table-column prop="color" width="60" label="颜色">
          </el-table-column>
          <el-table-column prop="materialOther" label="扩展信息">
          </el-table-column>
          <el-table-column prop="stock" width="60" label="库存">
          </el-table-column>
          <el-table-column prop="unit" width="60" label="单位">
          </el-table-column>
          <el-table-column prop="snList" label="序列号">
          </el-table-column>
          <el-table-column prop="batchNumber" label="批号">
          </el-table-column>
          <el-table-column prop="expirationDate" label="有效期">
          </el-table-column>
          <el-table-column prop="sku" label="多属性">
          </el-table-column>
          <el-table-column prop="operNumber" width="60" label="数量">
          </el-table-column>
          <el-table-column prop="unitPrice" width="60" label="单价">
          </el-table-column>
          <!-- <el-table-column prop="taxUnitPrice" width="80" label="含税单价">
          </el-table-column> -->
          <el-table-column prop="allPrice" width="60" label="金额">
          </el-table-column>
          <el-table-column prop="taxRate" width="70" label="税率">
          </el-table-column>
          <el-table-column prop="taxMoney" width="70" label="税额">
          </el-table-column>
          <el-table-column prop="taxLastMoney" label="价税合计">
          </el-table-column>
          <el-table-column prop="remark" label="备注">
          </el-table-column>
        </el-table>
        <br />
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            优惠率： {{model.discount}}%
          </el-col>
          <el-col :span="6">
            收款优惠： {{model.discountMoney}}
          </el-col>
          <el-col :span="6">
            优惠后金额： {{model.discountLastMoney}}
          </el-col>
          <el-col :span="6">
            关联订单：{{model.linkNumber}}
          </el-col>
        </el-row>
        <br />
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            结算账户： {{model.accountName}}
          </el-col>
          <el-col :span="6">
            本次收款： {{model.changeAmount}}
          </el-col>
          <el-col :span="6">
            本次欠款： {{model.debt}}
          </el-col>
          <el-col :span="6">
            业务负责人： {{model.salesManStr}}
          </el-col>
        </el-row>
        <el-row :gutter="24" align="middle">
          <el-col>
            备注： {{model.remark}}
          </el-col>
        </el-row>
        <!-- <el-card class="box-card" style="min-height: 400px;">
     <div v-for="o in 4" :key="o" class="text item">

     </div>
   </el-card> -->
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="openPrintDetail()">打印预览</el-button>
          <el-button @click="detailvisible = false">取消</el-button>
        </div>
      </template>

      <template v-if="billType === '零售出库'">
        <section ref="lsck">
          <!-- <h1 v-show="isPrint">零售出库单</h1> -->
          <el-row :gutter="24" align="middle">
            <el-col :span="6">
              会员卡号：{{model.organName}}
            </el-col>
            <el-col :span="6">
              单据日期： {{model.operTimeStr}}
            </el-col>
            <el-col :span="6">
              单据编号： {{model.number}}
            </el-col>

            <el-col :span="6">
              收款类型：{{model.payType}}
            </el-col>
          </el-row>
          <br />
          <el-table border :data="tableData" style="width: 100%;">
            <el-table-column prop="depotName" label="仓库名称">
            </el-table-column>
            <el-table-column prop="barCode" label="条码">
            </el-table-column>
            <el-table-column prop="name" label="名称">
            </el-table-column>
            <el-table-column prop="standard" label="规格">
            </el-table-column>
            <el-table-column prop="model" label="型号">
            </el-table-column>
            <el-table-column prop="color" width="60" label="颜色">
            </el-table-column>
            <el-table-column prop="materialOther" width="160" label="扩展信息">
            </el-table-column>
            <el-table-column prop="stock" width="60" label="库存">
            </el-table-column>
            <el-table-column prop="unit" width="60" label="单位">
            </el-table-column>
            <el-table-column prop="snList" label="序列号">
            </el-table-column>
            <el-table-column prop="batchNumber" label="批号">
            </el-table-column>
            <el-table-column prop="expirationDate" label="有效期">
            </el-table-column>
            <el-table-column prop="sku" label="多属性">
            </el-table-column>
            <el-table-column prop="operNumber" width="60" label="数量">
            </el-table-column>
            <el-table-column prop="unitPrice" width="60" label="单价">
            </el-table-column>
            <el-table-column prop="allPrice" width="60" label="金额">
            </el-table-column>
            <el-table-column prop="remark" label="备注">
            </el-table-column>
          </el-table>
          <br />
          <el-row :gutter="24" align="middle">
            <el-col :span="6">
              单据金额： {{model.changeAmount}}
            </el-col>
            <el-col :span="6">
              收款金额： {{model.getAmount}}
            </el-col>
            <el-col :span="6">
              找零
              ： {{model.backAmount}}
            </el-col>

            <el-col :span="6">
              收款账户： {{model.accountName}}
            </el-col>
          </el-row>
          <el-row :gutter="24" align="middle">
            <el-col>
              备注： {{model.remark}}
            </el-col>
          </el-row>
        </section>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="openPrintDetail()">打印预览</el-button>
          <el-button @click="detailvisible = false">取消</el-button>
        </div>
      </template>

      <template v-if="billType === '零售退货入库'">
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            会员卡号：{{model.organName}}
          </el-col>
          <el-col :span="6">
            单据日期： {{model.operTimeStr}}
          </el-col>
          <el-col :span="6">
            单据编号： {{model.number}}
          </el-col>

          <el-col :span="6">
            关联单据：<el-link type="primary" @click="myHandleDetail(model.linkNumber)"> {{model.linkNumber}}</el-link>
          </el-col>
        </el-row>
        <br />
        <el-table border :data="tableData" style="width: 100%">
          <el-table-column prop="depotName" label="仓库名称">
          </el-table-column>
          <el-table-column prop="barCode" label="条码">
          </el-table-column>
          <el-table-column prop="name" label="名称">
          </el-table-column>
          <el-table-column prop="standard" label="规格">
          </el-table-column>
          <el-table-column prop="model" label="型号">
          </el-table-column>
          <el-table-column prop="color" width="60" label="颜色">
          </el-table-column>
          <el-table-column prop="materialOther" width="160" label="扩展信息">
          </el-table-column>
          <el-table-column prop="stock" width="60" label="库存">
          </el-table-column>
          <el-table-column prop="unit" width="60" label="单位">
          </el-table-column>
          <el-table-column prop="snList" label="序列号">
          </el-table-column>
          <el-table-column prop="batchNumber" label="批号">
          </el-table-column>
          <el-table-column prop="expirationDate" label="有效期">
          </el-table-column>
          <el-table-column prop="sku" label="多属性">
          </el-table-column>
          <el-table-column prop="operNumber" width="60" label="数量">
          </el-table-column>
          <el-table-column prop="unitPrice" width="60" label="单价">
          </el-table-column>
          <el-table-column prop="allPrice" width="60" label="金额">
          </el-table-column>
          <el-table-column prop="remark" label="备注">
          </el-table-column>
        </el-table>
        <br />
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            单据金额： {{model.changeAmount}}
          </el-col>
          <el-col :span="6">
            付款金额： {{model.getAmount}}
          </el-col>
          <el-col :span="6">
            找零： {{model.backAmount}}
          </el-col>
          <el-col :span="6">
            付款账户： {{model.accountName}}
          </el-col>
        </el-row>
        <el-row :gutter="24" align="middle">
          <el-col>
            备注： {{model.remark}}
          </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="openPrintDetail()">打印预览</el-button>
          <el-button @click="detailvisible = false">取消</el-button>
        </div>
      </template>

      <template v-if="billType === '采购退货出库'">
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            供应商：{{model.organName}}
          </el-col>
          <el-col :span="6">
            单据日期： {{model.operTimeStr}}
          </el-col>
          <el-col :span="6">
            单据编号： {{model.number}}
          </el-col>

          <el-col :span="6">
            关联单据：<el-link type="primary" @click="myHandleDetail(model.linkNumber)"> {{model.linkNumber}}</el-link>
          </el-col>
        </el-row>
        <br />
        <el-table border :data="tableData" style="width: 100%">
          <el-table-column prop="depotName" label="仓库名称">
          </el-table-column>
          <el-table-column prop="barCode" label="条码">
          </el-table-column>
          <el-table-column prop="name" label="名称">
          </el-table-column>
          <el-table-column prop="standard" label="规格">
          </el-table-column>
          <el-table-column prop="model" label="型号">
          </el-table-column>
          <el-table-column prop="color" width="60" label="颜色">
          </el-table-column>
          <el-table-column prop="materialOther" width="160" label="扩展信息">
          </el-table-column>
          <el-table-column prop="stock" width="60" label="库存">
          </el-table-column>
          <el-table-column prop="unit" width="60" label="单位">
          </el-table-column>
          <el-table-column prop="snList" label="序列号">
          </el-table-column>
          <el-table-column prop="batchNumber" label="批号">
          </el-table-column>
          <el-table-column prop="expirationDate" label="有效期">
          </el-table-column>
          <el-table-column prop="sku" label="多属性">
          </el-table-column>
          <el-table-column prop="operNumber" width="60" label="数量">
          </el-table-column>
          <el-table-column prop="unitPrice" width="60" label="单价">
          </el-table-column>
          <!-- <el-table-column prop="taxUnitPrice" width="60" label="含税单价">
          </el-table-column> -->
          <el-table-column prop="taxMoney" width="60" label="税额">
          </el-table-column>
          <el-table-column prop="taxLastMoney" width="60" label="价税合计">
          </el-table-column>
          <el-table-column prop="remark" label="备注">
          </el-table-column>
        </el-table>
        <br />
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            优惠率： {{model.discount}}%
          </el-col>
          <el-col :span="6">
            退款优惠： {{model.discountMoney}}
          </el-col>
          <el-col :span="6">
            优惠后金额： {{model.discountLastMoney}}
          </el-col>
          <el-col :span="6">
            其它费用： {{model.otherMoney}}
          </el-col>
        </el-row>
        <br />
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            结算账户： {{model.accountName}}
          </el-col>
          <el-col :span="6">
            本次退款： {{model.changeAmount}}
          </el-col>
          <el-col :span="6">
            本次欠款： {{model.debt}}
          </el-col>
          <el-col :span="6">
          </el-col>
        </el-row>
        <el-row :gutter="24" align="middle">
          <el-col>
            备注： {{model.remark}}
          </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="openPrintDetail()">打印预览</el-button>
          <el-button @click="detailvisible = false">取消</el-button>
        </div>
      </template>
      <template v-if="billType === '销售退货入库'">
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            客户：{{model.organName}}
          </el-col>
          <el-col :span="6">
            单据日期： {{model.operTimeStr}}
          </el-col>
          <el-col :span="6">
            单据编号： {{model.number}}
          </el-col>
          <el-col :span="6">
            关联单据：<el-link type="primary" @click="myHandleDetail(model.linkNumber)"> {{model.linkNumber}}</el-link>
          </el-col>
        </el-row>
        <br />
        <el-table border :data="tableData" style="width: 100%">
          <el-table-column prop="depotName" label="仓库名称">
          </el-table-column>
          <el-table-column prop="barCode" label="条码">
          </el-table-column>
          <el-table-column prop="name" label="名称">
          </el-table-column>
          <el-table-column prop="standard" label="规格">
          </el-table-column>
          <el-table-column prop="model" label="型号">
          </el-table-column>
          <el-table-column prop="color" width="60" label="颜色">
          </el-table-column>
          <el-table-column prop="materialOther" width="160" label="扩展信息">
          </el-table-column>
          <el-table-column prop="stock" width="60" label="库存">
          </el-table-column>
          <el-table-column prop="unit" width="60" label="单位">
          </el-table-column>
          <el-table-column prop="snList" label="序列号">
          </el-table-column>
          <el-table-column prop="batchNumber" label="批号">
          </el-table-column>
          <el-table-column prop="expirationDate" label="有效期">
          </el-table-column>
          <el-table-column prop="sku" label="多属性">
          </el-table-column>
          <el-table-column prop="operNumber" width="60" label="数量">
          </el-table-column>
          <el-table-column prop="unitPrice" width="60" label="单价">
          </el-table-column>
         <!-- <el-table-column prop="taxUnitPrice" width="60" label="含税单价">
          </el-table-column> -->
          <el-table-column prop="taxMoney" width="60" label="税额">
          </el-table-column>
          <el-table-column prop="taxLastMoney" width="60" label="价税合计">
          </el-table-column>
          <el-table-column prop="remark" label="备注">
          </el-table-column>
        </el-table>
        <br />
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            优惠率： {{model.discount}}%
          </el-col>
          <el-col :span="6">
            退款优惠： {{model.discountMoney}}
          </el-col>
          <el-col :span="6">
            优惠后金额： {{model.discountLastMoney}}
          </el-col>
          <el-col :span="6">
            其它费用： {{model.otherMoney}}
          </el-col>
        </el-row>
        <br />
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            结算账户： {{model.accountName}}
          </el-col>
          <el-col :span="6">
            本次退款： {{model.changeAmount}}
          </el-col>
          <el-col :span="6">
            本次欠款： {{model.debt}}
          </el-col>
          <el-col :span="6">
            业务负责人：{{model.salesManStr}}
          </el-col>
        </el-row>
        <el-row :gutter="24" align="middle">
          <el-col>
            备注： {{model.remark}}
          </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="openPrintDetail()">打印预览</el-button>
          <el-button @click="detailvisible = false">取消</el-button>
        </div>
      </template>
      <!--采购入库-->
      <template v-if="billType === '采购入库'">
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            供应商：{{model.organName}}
          </el-col>
          <el-col :span="6">
            单据日期： {{model.operTimeStr}}
          </el-col>
          <el-col :span="6">
            单据编号： {{model.number}}
          </el-col>

          <el-col :span="6">
            关联单据：<el-link type="primary" @click="myHandleDetail(model.linkNumber)"> {{model.linkNumber}}</el-link>
          </el-col>
        </el-row>
        <br />
        <el-table border :data="tableData" style="width: 100%">
          <el-table-column prop="depotName" label="仓库名称">
          </el-table-column>
          <el-table-column prop="barCode" label="条码">
          </el-table-column>
          <el-table-column prop="name" label="名称">
          </el-table-column>
          <el-table-column prop="standard" label="规格">
          </el-table-column>
          <el-table-column prop="model" label="型号">
          </el-table-column>
          <el-table-column prop="color" width="60" label="颜色">
          </el-table-column>
          <el-table-column prop="materialOther" width="160" label="扩展信息">
          </el-table-column>
          <el-table-column prop="stock" width="60" label="库存">
          </el-table-column>
          <el-table-column prop="unit" width="60" label="单位">
          </el-table-column>
          <el-table-column prop="snList" label="序列号">
          </el-table-column>
          <el-table-column prop="batchNumber" label="批号">
          </el-table-column>
          <el-table-column prop="expirationDate" label="有效期">
          </el-table-column>
          <el-table-column prop="sku" label="多属性">
          </el-table-column>
          <el-table-column prop="operNumber" width="60" label="数量">
          </el-table-column>
          <el-table-column prop="unitPrice" width="60" label="单价">
          </el-table-column>
          <!-- <el-table-column prop="taxUnitPrice" width="60" label="含税单价">
          </el-table-column> -->
          <el-table-column prop="taxMoney" width="60" label="税额">
          </el-table-column>
          <el-table-column prop="taxLastMoney" width="60" label="价税合计">
          </el-table-column>
          <el-table-column prop="remark" label="备注">
          </el-table-column>
        </el-table>
        <br />
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            优惠率： {{model.discount}}%
          </el-col>
          <el-col :span="6">
            付款优惠： {{model.discountMoney}}
          </el-col>
          <el-col :span="6">
            优惠后金额： {{model.discountLastMoney}}
          </el-col>
          <el-col :span="6">
            其它费用： {{model.otherMoney}}
          </el-col>
        </el-row>
        <br />
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            结算账户： {{model.accountName}}
          </el-col>
          <el-col :span="6">
            本次付款： {{model.changeAmount}}
          </el-col>
          <el-col :span="6">
            本次欠款： {{model.debt}}
          </el-col>
          <el-col :span="6">
          </el-col>
        </el-row>
        <el-row :gutter="24" align="middle">
          <el-col>
            备注： {{model.remark}}
          </el-col>
        </el-row>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="openPrintDetail()">打印预览</el-button>
          <el-button @click="detailvisible = false">取消</el-button>
        </div>
      </template>
      <!--采购订单-->
      <template v-if="billType === '采购订单'">
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            供应商：{{model.organName}}
          </el-col>
          <el-col :span="6">
            单据日期： {{model.operTimeStr}}
          </el-col>
          <el-col :span="6">
            单据编号： {{model.number}}
          </el-col>
          <el-col :span="6">
          </el-col>
        </el-row>
        <br />
        <el-table border :data="tableData" style="width: 100%">
          <el-table-column prop="depotName" label="仓库名称">
          </el-table-column>
          <el-table-column prop="barCode" label="条码">
          </el-table-column>
          <el-table-column prop="name" label="名称">
          </el-table-column>
          <el-table-column prop="standard" label="规格">
          </el-table-column>
          <el-table-column prop="model" label="型号">
          </el-table-column>
          <el-table-column prop="color" width="60" label="颜色">
          </el-table-column>
          <el-table-column prop="materialOther" width="160" label="扩展信息">
          </el-table-column>
          <el-table-column prop="stock" width="60" label="库存">
          </el-table-column>
          <el-table-column prop="unit" width="60" label="单位">
          </el-table-column>
          <el-table-column prop="snList" label="序列号">
          </el-table-column>
          <el-table-column prop="batchNumber" label="批号">
          </el-table-column>
          <el-table-column prop="expirationDate" label="有效期">
          </el-table-column>
          <el-table-column prop="sku" label="多属性">
          </el-table-column>
          <el-table-column prop="operNumber" width="60" label="数量">
          </el-table-column>
          <el-table-column prop="unitPrice" width="60" label="单价">
          </el-table-column>
          <!-- <el-table-column prop="taxUnitPrice" width="60" label="含税单价">
          </el-table-column> -->
          <el-table-column prop="taxMoney" width="60" label="税额">
          </el-table-column>
          <el-table-column prop="taxLastMoney" width="60" label="价税合计">
          </el-table-column>
          <el-table-column prop="remark" label="备注">
          </el-table-column>
        </el-table>
        <br />
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            优惠率： {{model.discount}}%
          </el-col>
          <el-col :span="6">
            退款优惠： {{model.discountMoney}}
          </el-col>
          <el-col :span="6">
            优惠后金额： {{model.discountLastMoney}}
          </el-col>
          <el-col :span="6">
          </el-col>
        </el-row>
        <el-row :gutter="24" align="middle">
          <el-col>
            备注： {{model.remark}}
          </el-col>
        </el-row>
        <br />
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="openPrintDetail()">打印预览</el-button>
          <el-button @click="detailvisible = false">取消</el-button>
        </div>
      </template>

      <template v-if="billType === '销售订单'">
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            客户：{{model.organName}}
          </el-col>
          <el-col :span="6">
            单据日期：{{model.operTimeStr}}
          </el-col>
          <el-col :span="6">
            单据编号：{{model.number}}
          </el-col>
          <el-col :span="6">
            业务负责人：{{model.salesManStr}}
          </el-col>
        </el-row>
        <br />
        <el-table border :data="tableData" style="width: 100%">
          <el-table-column prop="depotName" label="仓库名称">
          </el-table-column>
          <el-table-column prop="barCode" label="条码">
          </el-table-column>
          <el-table-column prop="name" label="名称">
          </el-table-column>
          <el-table-column prop="standard" label="规格">
          </el-table-column>
          <el-table-column prop="model" label="型号">
          </el-table-column>
          <el-table-column prop="color" width="60" label="颜色">
          </el-table-column>
          <el-table-column prop="materialOther" label="扩展信息">
          </el-table-column>
          <el-table-column prop="stock" width="60" label="库存">
          </el-table-column>
          <el-table-column prop="unit" width="60" label="单位">
          </el-table-column>
          <el-table-column prop="snList" label="序列号">
          </el-table-column>
          <el-table-column prop="batchNumber" label="批号">
          </el-table-column>
          <el-table-column prop="expirationDate" label="有效期">
          </el-table-column>
          <el-table-column prop="sku" label="多属性">
          </el-table-column>
          <el-table-column prop="operNumber" width="60" label="数量">
          </el-table-column>
          <el-table-column prop="unitPrice" width="60" label="单价">
          </el-table-column>
         <!-- <el-table-column prop="taxUnitPrice" width="80" label="含税单价">
          </el-table-column> -->
          <el-table-column prop="allPrice" width="60" label="金额">
          </el-table-column>
          <el-table-column prop="taxRate" width="70" label="税率">
          </el-table-column>
          <el-table-column prop="taxMoney" width="70" label="税额">
          </el-table-column>
          <el-table-column prop="taxLastMoney" label="价税合计">
          </el-table-column>
          <el-table-column prop="remark" label="备注">
          </el-table-column>
        </el-table>
        <br />
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            优惠率： {{model.discount}}%
          </el-col>
          <el-col :span="6">
            优惠金额： {{model.discountMoney}}
          </el-col>
          <el-col :span="6">
            优惠后金额： {{model.discountLastMoney}}
          </el-col>
          <el-col :span="6">
          </el-col>
        </el-row>
        <el-row :gutter="24" align="middle">
          <el-col>
            备注： {{model.remark}}
          </el-col>
        </el-row>
        <br />
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="openPrintDetail()">打印预览</el-button>
          <el-button @click="detailvisible = false">取消</el-button>
        </div>
      </template>

      <!--其它入库-->
      <template v-if="billType === '其它入库'">
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            供应商：{{model.organName}}
          </el-col>
          <el-col :span="6">
            单据日期： {{model.operTimeStr}}
          </el-col>
          <el-col :span="6">
            单据编号： {{model.number}}
          </el-col>
          <el-col :span="6">
          </el-col>
        </el-row>
        <br />
        <el-table border :data="tableData" style="width: 100%">
          <el-table-column prop="depotName" label="仓库名称">
          </el-table-column>
          <el-table-column prop="barCode" label="条码">
          </el-table-column>
          <el-table-column prop="name" label="名称">
          </el-table-column>
          <el-table-column prop="standard" label="规格">
          </el-table-column>
          <el-table-column prop="model" label="型号">
          </el-table-column>
          <el-table-column prop="color" width="60" label="颜色">
          </el-table-column>
          <el-table-column prop="materialOther" width="160" label="扩展信息">
          </el-table-column>
          <el-table-column prop="stock" width="60" label="库存">
          </el-table-column>
          <el-table-column prop="unit" width="60" label="单位">
          </el-table-column>
          <el-table-column prop="snList" label="序列号">
          </el-table-column>
          <el-table-column prop="batchNumber" label="批号">
          </el-table-column>
          <el-table-column prop="expirationDate" label="有效期">
          </el-table-column>
          <el-table-column prop="sku" label="多属性">
          </el-table-column>
          <el-table-column prop="operNumber" width="60" label="数量">
          </el-table-column>
          <el-table-column prop="unitPrice" width="60" label="单价">
          </el-table-column>
         <!-- <el-table-column prop="taxUnitPrice" width="60" label="含税单价">
          </el-table-column> -->
          <el-table-column prop="taxMoney" width="60" label="税额">
          </el-table-column>
          <el-table-column prop="taxLastMoney" width="60" label="价税合计">
          </el-table-column>
          <el-table-column prop="remark" label="备注">
          </el-table-column>
        </el-table>
        <br />
        <el-row :gutter="24" align="middle">
          <el-col>
            备注： {{model.remark}}
          </el-col>
        </el-row>
        <br />
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="openPrintDetail()">打印预览</el-button>
          <el-button @click="detailvisible = false">取消</el-button>
        </div>
      </template>

      <!--其它出库-->
      <template v-if="billType === '其它出库'">
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            客户：{{model.organName}}
          </el-col>
          <el-col :span="6">
            单据日期： {{model.operTimeStr}}
          </el-col>
          <el-col :span="6">
            单据编号： {{model.number}}
          </el-col>
          <el-col :span="6">
          </el-col>
        </el-row>
        <br />
        <el-table border :data="tableData" style="width: 100%">
          <el-table-column prop="depotName" label="仓库名称">
          </el-table-column>
          <el-table-column prop="barCode" label="条码">
          </el-table-column>
          <el-table-column prop="name" label="名称">
          </el-table-column>
          <el-table-column prop="standard" label="规格">
          </el-table-column>
          <el-table-column prop="model" label="型号">
          </el-table-column>
          <el-table-column prop="color" width="60" label="颜色">
          </el-table-column>
          <el-table-column prop="materialOther" width="160" label="扩展信息">
          </el-table-column>
          <el-table-column prop="stock" width="60" label="库存">
          </el-table-column>
          <el-table-column prop="unit" width="60" label="单位">
          </el-table-column>
          <el-table-column prop="snList" label="序列号">
          </el-table-column>
          <el-table-column prop="batchNumber" label="批号">
          </el-table-column>
          <el-table-column prop="expirationDate" label="有效期">
          </el-table-column>
          <el-table-column prop="sku" label="多属性">
          </el-table-column>
          <el-table-column prop="operNumber" width="60" label="数量">
          </el-table-column>
          <el-table-column prop="unitPrice" width="60" label="单价">
          </el-table-column>
          <!-- <el-table-column prop="taxUnitPrice" width="60" label="含税单价">
          </el-table-column> -->
          <el-table-column prop="taxMoney" width="60" label="税额">
          </el-table-column>
          <el-table-column prop="taxLastMoney" width="60" label="价税合计">
          </el-table-column>
          <el-table-column prop="remark" label="备注">
          </el-table-column>
        </el-table>
        <br />
        <el-row :gutter="24" align="middle">
          <el-col>
            备注： {{model.remark}}
          </el-col>
        </el-row>
        <br />
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="openPrintDetail()">打印预览</el-button>
          <el-button @click="detailvisible = false">取消</el-button>
        </div>
      </template>

      <!--调拨出库-->
      <template v-if="billType === '调拨出库'">
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            单据日期： {{model.operTimeStr}}
          </el-col>
          <el-col :span="6">
            单据编号： {{model.number}}
          </el-col>
          <el-col :span="6">
          </el-col>
          <el-col :span="6">
          </el-col>
        </el-row>
        <br />
        <el-table border :data="tableData" style="width: 100%">
          <el-table-column prop="depotName" label="仓库名称">
          </el-table-column>
          <el-table-column prop="barCode" label="条码">
          </el-table-column>
          <el-table-column prop="name" label="名称">
          </el-table-column>
          <el-table-column prop="standard" label="规格">
          </el-table-column>
          <el-table-column prop="model" label="型号">
          </el-table-column>
          <el-table-column prop="color" width="60" label="颜色">
          </el-table-column>
          <el-table-column prop="materialOther" width="160" label="扩展信息">
          </el-table-column>
          <el-table-column prop="stock" width="60" label="库存">
          </el-table-column>
          <el-table-column prop="unit" width="60" label="单位">
          </el-table-column>
          <el-table-column label="调入仓库" prop="anotherDepotName">
          </el-table-column>
          <el-table-column prop="snList" label="序列号">
          </el-table-column>
          <el-table-column prop="batchNumber" label="批号">
          </el-table-column>
          <el-table-column prop="expirationDate" label="有效期">
          </el-table-column>
          <el-table-column prop="sku" label="多属性">
          </el-table-column>
          <el-table-column prop="operNumber" width="60" label="数量">
          </el-table-column>
          <el-table-column prop="unitPrice" width="60" label="单价">
          </el-table-column>
         <!-- <el-table-column prop="taxUnitPrice" width="60" label="含税单价">
          </el-table-column> -->
          <el-table-column prop="taxMoney" width="60" label="税额">
          </el-table-column>
          <el-table-column prop="taxLastMoney" width="60" label="价税合计">
          </el-table-column>
          <el-table-column prop="remark" label="备注">
          </el-table-column>
        </el-table>
        <el-row :gutter="24" align="middle">
          <el-col>
            备注： {{model.remark}}
          </el-col>
        </el-row>
        <br />
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="openPrintDetail()">打印预览</el-button>
          <el-button @click="detailvisible = false">取消</el-button>
        </div>
      </template>

      <!--组装单-->
      <template v-if="billType === '组装单'">
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            单据日期： {{model.operTimeStr}}
          </el-col>
          <el-col :span="6">
            单据编号： {{model.number}}
          </el-col>
          <el-col :span="6">
          </el-col>
          <el-col :span="6">
          </el-col>
        </el-row>
        <br />
        <el-table border :data="tableData" style="width: 100%">
          <el-table-column prop="mType" label="商品类型">
          </el-table-column>
          <el-table-column prop="depotName" label="仓库名称">
          </el-table-column>
          <el-table-column prop="barCode" label="条码">
          </el-table-column>
          <el-table-column prop="name" label="名称">
          </el-table-column>
          <el-table-column prop="standard" label="规格">
          </el-table-column>
          <el-table-column prop="model" label="型号">
          </el-table-column>
          <el-table-column prop="color" width="60" label="颜色">
          </el-table-column>
          <el-table-column prop="materialOther" width="160" label="扩展信息">
          </el-table-column>
          <el-table-column prop="stock" width="60" label="库存">
          </el-table-column>
          <el-table-column prop="unit" width="60" label="单位">
          </el-table-column>
          <el-table-column prop="snList" label="序列号">
          </el-table-column>
          <el-table-column prop="batchNumber" label="批号">
          </el-table-column>
          <el-table-column prop="expirationDate" label="有效期">
          </el-table-column>
          <el-table-column prop="sku" label="多属性">
          </el-table-column>
          <el-table-column prop="operNumber" width="60" label="数量">
          </el-table-column>
          <el-table-column prop="unitPrice" width="60" label="单价">
          </el-table-column>
          <!-- <el-table-column prop="taxUnitPrice" width="60" label="含税单价">
          </el-table-column> -->
          <el-table-column prop="taxMoney" width="60" label="税额">
          </el-table-column>
          <el-table-column prop="taxLastMoney" width="60" label="价税合计">
          </el-table-column>
          <el-table-column prop="remark" label="备注">
          </el-table-column>
        </el-table>
        <el-row :gutter="24" align="middle">
          <el-col>
            备注： {{model.remark}}
          </el-col>
        </el-row>
        <br />
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="openPrintDetail()">打印预览</el-button>
          <el-button @click="detailvisible = false">取消</el-button>
        </div>
      </template>

      <!--拆卸单-->
      <template v-if="billType === '拆卸单'">
        <el-row :gutter="24" align="middle">
          <el-col :span="6">
            单据日期： {{model.operTimeStr}}
          </el-col>
          <el-col :span="6">
            单据编号： {{model.number}}
          </el-col>
          <el-col :span="6">
          </el-col>
          <el-col :span="6">
          </el-col>
        </el-row>
        <br />
        <el-table border :data="tableData" style="width: 100%">
          <el-table-column prop="mType" label="商品类型">
          </el-table-column>
          <el-table-column prop="depotName" label="仓库名称">
          </el-table-column>
          <el-table-column prop="barCode" label="条码">
          </el-table-column>
          <el-table-column prop="name" label="名称">
          </el-table-column>
          <el-table-column prop="standard" label="规格">
          </el-table-column>
          <el-table-column prop="model" label="型号">
          </el-table-column>
          <el-table-column prop="color" width="60" label="颜色">
          </el-table-column>
          <el-table-column prop="materialOther" width="160" label="扩展信息">
          </el-table-column>
          <el-table-column prop="stock" width="60" label="库存">
          </el-table-column>
          <el-table-column prop="unit" width="60" label="单位">
          </el-table-column>
          <el-table-column prop="snList" label="序列号">
          </el-table-column>
          <el-table-column prop="batchNumber" label="批号">
          </el-table-column>
          <el-table-column prop="expirationDate" label="有效期">
          </el-table-column>
          <el-table-column prop="sku" label="多属性">
          </el-table-column>
          <el-table-column prop="operNumber" width="60" label="数量">
          </el-table-column>
          <el-table-column prop="unitPrice" width="60" label="单价">
          </el-table-column>
         <!-- <el-table-column prop="taxUnitPrice" width="60" label="含税单价">
          </el-table-column> -->
          <el-table-column prop="taxMoney" width="60" label="税额">
          </el-table-column>
          <el-table-column prop="taxLastMoney" width="60" label="价税合计">
          </el-table-column>
          <el-table-column prop="remark" label="备注">
          </el-table-column>
        </el-table>
        <el-row :gutter="24" align="middle">
          <el-col>
            备注： {{model.remark}}
          </el-col>
        </el-row>
        <br />
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="openPrintDetail()">打印预览</el-button>
          <el-button @click="detailvisible = false">取消</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog title="打印预览" :visible.sync="printopen" width="1050px" append-to-body class="base-dialog">
      <el-row :gutter="24" align="middle" style="margin-top: -40px;">
        <el-col :span="12">
          每页行数：<el-input-number v-model="pageSize" :min="1"></el-input-number>
        </el-col>
    <!--   <el-col :span="12">
          每页高度：<el-input-number v-model="contentHight" :min="1"></el-input-number>
        </el-col> -->
      </el-row>

        <template v-if="billType === '销售出库'">
          <div id="printDetailXSCK">
            <!-- v-bind:style="{height:contentHight}" :style="style" -->
            <div  v-for="page in pageNum" :key="page" >
               <div class="print-wrap"  v-bind:style="page%2==0?'height: 720px':'height: 693px'">
                  <h1>
                    <el-input v-model="printTitle" class="printTitle"></el-input>
                  </h1>
                  <div class="caption3">
                      <span><b>客户名称：</b>{{model.organName}}</span>
                      <span><b>单据日期：</b>{{model.operTimeStr}}</span>
                      <span><b>订单编号：</b>{{model.number}}</span>
                  </div>
                  <div class="caption3" >
                      <span><b>客户地址：</b>{{model.address}}</span>
                      <span><b>联系人：</b> {{model.contacts}}</span>
                      <span><b>联系电话：</b> {{model.telephone}}</span>
                  </div>
                    <div class="table-wrap">
                      <table>
                        <thead>
                          <tr>
                              <th >序号</th>
                              <th>产品名称</th>
                              <th >规格</th>
                              <th >单位</th>
                              <th >数量</th>
                              <th >单价（元）</th>
                              <th >金额（元）</th>
                              <th >备注</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr v-for="(table,index) in tableData.slice((page-1)*pageSize,page*pageSize)" :key="index">
                              <td>{{index+1+(page-1)*pageSize}}</td>
                              <td>{{table.name}}</td>
                              <td>{{table.standard}}</td>
                              <td>{{table.unit}}</td>
                              <td>{{table.operNumber}}</td>
                              <td>{{table.unitPrice}}</td>
                              <td>{{table.allPrice}}</td>
                              <td>{{table.remark}}</td>
                            </tr>
                            <tr v-for="(table,index1) in indexData" :key="table" v-if="pageNum == page">
                               <td></td>
                               <td></td>
                               <td></td>
                               <td></td>
                               <td></td>
                               <td></td>
                               <td></td>
                               <td></td>
                            </tr>
                          </tbody>
                          <tr v-if="pageNum == page">
                            <td class="table-title">合计</td>
                            <td colspan="3"></td>
                            <td class="table-value" style="text-align: center;">{{totalNum}}</td>
                            <td></td>
                             <td class="table-value" style="text-align: center;">{{totalPrice}}</td>
                             <td></td>
                          </tr>
                          <tr v-else="pageNum != page">
                            <td class="table-title">合计</td>
                            <td colspan="3"></td>
                            <td class="table-value" style="text-align: center;"></td>
                            <td></td>
                             <td class="table-value" style="text-align: center;"></td>
                             <td></td>
                          </tr>
                          <tr v-if="pageNum == page">
                            <td class="table-title" colspan="3">合计金额（大写）</td>
                            <td colspan="5" class="table-value" style="text-align: center;">{{totalPriceCap}}</td>
                          </tr>
                          <tr v-else="pageNum == page">
                            <td class="table-title" colspan="3">合计金额（大写）</td>
                            <td colspan="5" class="table-value" style="text-align: center;"></td>
                          </tr>
                      </table>
                    </div>
                   <div class="sumbox3 ">
                      <span><b>业务负责人：</b>{{model.salesManStr}}</span>
                      <span><b>仓管员：</b></span>
                      <span><b>客户签字：</b></span>
                    </div>
                    <div style="height: 50px;"  v-if="pageNum > page"></div>
                 </div>
             </div>
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button style="margin-top: 12px;" v-print="'#printDetailXSCK'" type="warning">打 印</el-button>
              <el-button @click="printopen=false">取 消</el-button>
            </div>
         </template>

        <template v-if="billType === '零售出库'">
          <div class="print-wrap" id="printDetailLSCK">
            <h1 style="margin-top:5px">
              {{printTitle}}
            </h1>
            <div class="caption">
               <!-- <span>会员卡号：{{model.organName}}</span>
                <span>单据日期：{{model.operTimeStr}}</span>
                <span>单据编号：{{model.number}}</span>
                <span>收款类型：{{model.payType}}</span> -->
            </div>
              <div class="table-wrap">
                <table>
                  <thead>
                    <tr>
                      <td class="table-title" >会员名称</td>
                      <td class="table-value" colspan="3">{{model.organName}}</td>
                      <td class="table-title">日期</td>
                      <td class="table-value" colspan="3">{{parseTime(model.operTimeStr,'{y}-{m}-{d}')}}</td>
                    </tr>
                    <tr>
                      <th>序号</th>
                      <th>品名</th>
                      <th >规格</th>
                      <th >单位</th>
                      <th >数量</th>
                      <th >单价</th>
                      <th >金额</th>
                      <th >备注</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr v-for="(table,index) in tableData" :key="index">
                      <td>{{index+1}}</td>
                      <td>{{table.name}}</td>
                      <td>{{table.standard}}</td>
                      <td>{{table.unit}}</td>
                      <td>{{table.operNumber}}</td>
                      <td>{{table.unitPrice}}</td>
                      <td>{{table.allPrice}}</td>
                      <td>{{table.remark}}</td>
                    </tr>
                    <tr v-for="(table,index1) in indexData" :key="table" >
                       <td>{{index1+startIndex}}</td>
                       <td></td>
                       <td></td>
                       <td></td>
                       <td></td>
                       <td></td>
                       <td></td>
                       <td></td>
                    </tr>
                  </tbody>
                  <tr>
                    <td class="table-title">合计</td>
                    <td colspan="5"></td>
                    <td class="table-value" style="text-align: center;">{{model.totalPrice}}</td>
                    <td class="table-value" >{{model.remark}}</td>
                  </tr>
                </table>
              </div>
              <div class="sumbox">
                <span>联系人： {{model.contacts}}</span>
                <span>联系电话： {{model.telephone}}</span>
                 <!-- <span>收款账户： {{model.accountName}}</span>
                 <span>单据金额： {{model.changeAmount}}</span>
                 <span>收款金额： {{model.getAmount}}</span>
                 <span>找零： {{model.backAmount}}</span> -->
              </div>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button style="margin-top: 12px;" v-print="'#printDetailLSCK'" type="warning">打 印</el-button>
            <el-button @click="printopen=false">取 消</el-button>
          </div>
        </template>
        <template v-if="billType === '零售退货入库'">
           <div class="print-wrap" id="printDetailLSTH">
             <h1 style="margin-top:5px">
               <el-input v-model="printTitle" ></el-input>
             </h1>
             <div class="caption">
               <!--  <span>会员卡号：{{model.organName}}</span>
                 <span>单据日期：{{model.operTimeStr}}</span>
                 <span>单据编号：{{model.number}}</span>
                 <span>关联单据：{{model.linkNumber}}</span> -->
             </div>
               <div class="table-wrap">
                 <table>
                   <thead>
                     <tr>
                       <td class="table-title" >会员名称</td>
                       <td class="table-value" colspan="3">{{model.organName}}</td>
                       <td class="table-title">日期</td>
                       <td class="table-value" colspan="3">{{parseTime(model.operTimeStr,'{y}-{m}-{d}')}}</td>
                     </tr>
                     <tr>
                         <th >序号</th>
                         <th>品名</th>
                         <th >规格</th>
                         <th >单位</th>
                         <th >数量</th>
                         <th >单价</th>
                         <th >金额</th>
                         <th >备注</th>
                       </tr>
                     </thead>
                     <tbody>
                       <tr v-for="(table,index) in tableData" :key="index">
                         <td>{{index+1}}</td>
                         <td>{{table.name}}</td>
                         <td>{{table.standard}}</td>
                         <td>{{table.unit}}</td>
                         <td>{{table.operNumber}}</td>
                         <td>{{table.unitPrice}}</td>
                         <td>{{table.allPrice}}</td>
                         <td>{{table.remark}}</td>
                       </tr>
                       <tr v-for="(table,index1) in indexData" :key="table" >
                          <td>{{index1+startIndex}}</td>
                          <td></td>
                          <td></td>
                          <td></td>
                          <td></td>
                          <td></td>
                          <td></td>
                          <td></td>
                       </tr>
                     </tbody>
                     <tr>
                       <td class="table-title">合计</td>
                       <td colspan="5"></td>
                       <td class="table-value" style="text-align: center;">{{model.totalPrice}}</td>
                       <td class="table-value" >{{model.remark}}</td>
                     </tr>
                 </table>
               </div>
               <div class="sumbox">
                 <span>联系人： {{model.contacts}}</span>
                 <span>联系电话： {{model.telephone}}</span>
                  <!-- <span>单据金额： {{model.changeAmount}}</span>
                   <span>退款金额： {{model.getAmount}}</span>
                   <span>找零： {{model.backAmount}}</span>
                   <span>收款账户： {{model.accountName}}</span> -->
               </div>
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button style="margin-top: 12px;" v-print="'#printDetailLSTH'" type="warning">打 印</el-button>
              <el-button @click="printopen=false">取 消</el-button>
            </div>
         </template>

        <template v-if="billType === '采购订单'">
           <div class="print-wrap" id="printDetailCGDD">
             <h1 style="margin-top:5px">
               {{printTitle}}
             </h1>
             <div class="caption">
                  <!-- <span>供应商：{{model.organName}}</span>
                  <span>单据日期：{{model.operTimeStr}}</span>
                  <span>单据编号：{{model.number}}</span>
                  <span></span> -->
             </div>
               <div class="table-wrap">
                 <table>
                   <thead>
                     <tr>
                       <td class="table-title" >供应商名称</td>
                       <td class="table-value" colspan="3">{{model.organName}}</td>
                       <td class="table-title">日期</td>
                       <td class="table-value" colspan="3">{{parseTime(model.operTimeStr,'{y}-{m}-{d}')}}</td>
                     </tr>
                    <tr>
                        <th >序号</th>
                        <th>品名</th>
                        <th >规格</th>
                        <th >单位</th>
                        <th >数量</th>
                        <th >单价</th>
                        <th >金额</th>
                        <th >备注</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(table,index) in tableData" :key="index">
                        <td>{{index+1}}</td>
                        <td>{{table.name}}</td>
                        <td>{{table.standard}}</td>
                        <td>{{table.unit}}</td>
                        <td>{{table.operNumber}}</td>
                        <td>{{table.unitPrice}}</td>
                        <td>{{table.allPrice}}</td>
                        <td>{{table.remark}}</td>
                      </tr>
                      <tr v-for="(table,index1) in indexData" :key="table" >
                         <td>{{index1+startIndex}}</td>
                         <td></td>
                         <td></td>
                         <td></td>
                         <td></td>
                         <td></td>
                         <td></td>
                         <td></td>
                      </tr>
                    </tbody>
                    <tr>
                      <td class="table-title">合计</td>
                      <td colspan="5"></td>
                      <td class="table-value" style="text-align: center;">{{model.totalPrice}}</td>
                      <td class="table-value" >{{model.remark}}</td>
                    </tr>
                 </table>
               </div>
               <div class="sumbox">
                  <!--  <span>优惠率： {{model.discount}}%</span>
                    <span>付款优惠： {{model.discountMoney}}</span>
                    <span>优惠后金额： {{model.discountLastMoney}}</span>
                    <span></span> -->
               </div>
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button style="margin-top: 12px;" v-print="'#printDetailCGDD'" type="warning">打 印</el-button>
              <el-button @click="printopen=false">取 消</el-button>
            </div>
         </template>

        <template v-if="billType === '采购入库'">
           <div class="print-wrap" id="printDetailCGRK">
             <h1 style="margin-top:5px">
               {{printTitle}}
             </h1>
             <div class="caption">
                 <!-- <span>供应商：{{model.organName}}</span>
                  <span>单据日期：{{model.operTimeStr}}</span>
                  <span>单据编号：{{model.number}}</span>
                  <span>关联单据：{{model.linkNumber}}</span> -->
             </div>
               <div class="table-wrap">
                 <table>
                   <thead>
                     <tr>
                       <td class="table-title" >供应商名称</td>
                       <td class="table-value" colspan="3">{{model.organName}}</td>
                       <td class="table-title">日期</td>
                       <td class="table-value" colspan="3">{{parseTime(model.operTimeStr,'{y}-{m}-{d}')}}</td>
                     </tr>
                     <tr>
                         <th >序号</th>
                         <th>品名</th>
                         <th >规格</th>
                         <th >单位</th>
                         <th >数量</th>
                         <th >单价</th>
                         <th >金额</th>
                         <th >备注</th>
                       </tr>
                     </thead>
                     <tbody>
                       <tr v-for="(table,index) in tableData" :key="index">
                         <td>{{index+1}}</td>
                         <td>{{table.name}}</td>
                         <td>{{table.standard}}</td>
                         <td>{{table.unit}}</td>
                         <td>{{table.operNumber}}</td>
                         <td>{{table.unitPrice}}</td>
                         <td>{{table.allPrice}}</td>
                         <td>{{table.remark}}</td>
                       </tr>
                       <tr v-for="(table,index1) in indexData" :key="table" >
                          <td>{{index1+startIndex}}</td>
                          <td></td>
                          <td></td>
                          <td></td>
                          <td></td>
                          <td></td>
                          <td></td>
                          <td></td>
                       </tr>
                     </tbody>
                     <tr>
                       <td class="table-title">合计</td>
                       <td colspan="5"></td>
                       <td class="table-value" style="text-align: center;">{{model.totalPrice}}</td>
                       <td class="table-value" >{{model.remark}}</td>
                     </tr>
                 </table>
               </div>
               <div class="sumbox">
                  <!--  <span>优惠率： {{model.discount}}%</span>
                    <span>付款优惠： {{model.discountMoney}}</span>
                    <span>优惠后金额： {{model.discountLastMoney}}</span>
                    <span> 其它费用： {{model.otherMoney}}</span> -->
               </div>
               <div class="sumbox">
                  <!-- <span>结算账户： {{model.accountName}}</span>
                   <span>本次付款： {{model.changeAmount}}</span>
                   <span>本次欠款： {{model.debt}}</span>
                   <span></span> -->
               </div>
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button style="margin-top: 12px;" v-print="'#printDetailCGRK'" type="warning">打 印</el-button>
              <el-button @click="printopen=false">取 消</el-button>
            </div>
         </template>

        <template v-if="billType === '采购退货出库'">
           <div class="print-wrap" id="printDetailCGTH">
             <h1>
               {{printTitle}}
             </h1>
             <div class="caption">
                  <!-- <span>供应商：{{model.organName}}</span>
                  <span>单据日期：{{model.operTimeStr}}</span>
                  <span>单据编号：{{model.number}}</span>
                  <span>关联单据：{{model.linkNumber}}</span> -->
             </div>
               <div class="table-wrap">
                 <table>
                   <thead>
                     <tr>
                       <td class="table-title" >供应商名称</td>
                       <td class="table-value" colspan="3">{{model.organName}}</td>
                       <td class="table-title">日期</td>
                       <td class="table-value" colspan="3">{{parseTime(model.operTimeStr,'{y}-{m}-{d}')}}</td>
                     </tr>
                     <tr>
                         <th >序号</th>
                         <th>品名</th>
                         <th >规格</th>
                         <th >单位</th>
                         <th >数量</th>
                         <th >单价</th>
                         <th >金额</th>
                         <th >备注</th>
                       </tr>
                     </thead>
                     <tbody>
                       <tr v-for="(table,index) in tableData" :key="index">
                         <td>{{index+1}}</td>
                         <td>{{table.name}}</td>
                         <td>{{table.standard}}</td>
                         <td>{{table.unit}}</td>
                         <td>{{table.operNumber}}</td>
                         <td>{{table.unitPrice}}</td>
                         <td>{{table.allPrice}}</td>
                         <td>{{table.remark}}</td>
                       </tr>
                       <tr v-for="(table,index1) in indexData" :key="table" >
                          <td>{{index1+startIndex}}</td>
                          <td></td>
                          <td></td>
                          <td></td>
                          <td></td>
                          <td></td>
                          <td></td>
                          <td></td>
                       </tr>
                     </tbody>
                     <tr>
                       <td class="table-title">合计</td>
                       <td colspan="5"></td>
                       <td class="table-value" style="text-align: center;">{{model.totalPrice}}</td>
                       <td class="table-value" >{{model.remark}}</td>
                     </tr>
                 </table>
               </div>
               <div class="sumbox">
                   <!-- <span>优惠率： {{model.discount}}%</span>
                    <span>退款优惠： {{model.discountMoney}}</span>
                    <span>优惠后金额： {{model.discountLastMoney}}</span>
                    <span> 其它费用： {{model.otherMoney}}</span> -->
               </div>
               <div class="sumbox">
<!--                   <span>结算账户： {{model.accountName}}</span>
                   <span>本次退款： {{model.changeAmount}}</span>
                   <span>本次欠款： {{model.debt}}</span>
                   <span></span> -->
               </div>
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button style="margin-top: 12px;" v-print="'#printDetailCGTH'" type="warning">打 印</el-button>
              <el-button @click="printopen=false">取 消</el-button>
            </div>
         </template>

        <template v-if="billType === '销售订单'">
            <div id="printDetailXSDD">
             <div class="print-wrap" v-for="page in pageNum" :key="page">
               <h1 >
                  <el-input v-model="printTitle" class="printTitle"></el-input>
                </h1>
                <div class="caption3">
                    <span><b>客户名称：</b>{{model.organName}}</span>
                    <span><b>单据日期：</b>{{model.operTimeStr}}</span>
                    <span><b>订单编号：</b>{{model.number}}</span>
                </div>
                <div class="caption3">
                    <span><b>客户地址：</b>{{model.address}}</span>
                    <span><b>联系人：</b> {{model.contacts}}</span>
                    <span><b>联系电话：</b> {{model.telephone}}</span>
                </div>
                  <div class="table-wrap">
                    <table>
                      <thead>
                        <tr>
                            <th >序号</th>
                            <th>产品名称</th>
                            <th >规格</th>
                            <th >单位</th>
                            <th >数量</th>
                            <th >单价（元）</th>
                            <th >金额（元）</th>
                            <th >备注</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr v-for="(table,index) in tableData.slice((page-1)*pageSize,page*pageSize)" :key="index">
                            <td>{{index+1+(page-1)*pageSize}}</td>
                            <td>{{table.name}}</td>
                            <td>{{table.standard}}</td>
                            <td>{{table.unit}}</td>
                            <td>{{table.operNumber}}</td>
                            <td>{{table.unitPrice}}</td>
                            <td>{{table.allPrice}}</td>
                            <td>{{table.remark}}</td>
                          </tr>
                          <tr v-for="(table,index1) in indexData" :key="table" v-if="pageNum == page">
                             <td></td>
                             <td></td>
                             <td></td>
                             <td></td>
                             <td></td>
                             <td></td>
                             <td></td>
                             <td></td>
                          </tr>
                        </tbody>
                        <tr v-if="pageNum == page">
                          <td class="table-title">合计</td>
                          <td colspan="3"></td>
                          <td class="table-value" style="text-align: center;">{{totalNum}}</td>
                          <td></td>
                           <td class="table-value" style="text-align: center;">{{totalPrice}}</td>
                           <td></td>
                        </tr>
                        <tr v-if="pageNum == page">
                          <td class="table-title" colspan="3">合计金额（大写）</td>
                          <td colspan="5" class="table-value" style="text-align: center;">{{totalPriceCap}}</td>
                        </tr>
                    </table>
                  </div>
                 <div class="sumbox3">
                    <span><b>业务负责人：</b>{{model.salesManStr}}</span>
                    <span><b>仓管员：</b></span>
                    <span><b>客户签字：</b></span>
                  </div>
                  <div style="height: 50px;"  v-if="pageNum > page"></div>
               </div>
              </div>
              <div slot="footer" class="dialog-footer">
                <el-button style="margin-top: 12px;" v-print="'#printDetailXSDD'" type="warning">打 印</el-button>
                <el-button @click="printopen=false">取 消</el-button>
              </div>
         </template>

        <template v-if="billType === '销售退货入库'">
           <div id="printDetailXSTH">
            <div class="print-wrap" v-for="page in pageNum" :key="page">
              <h1 >
                 <el-input v-model="printTitle" class="printTitle"></el-input>
               </h1>
               <div class="caption3">
                   <span><b>客户名称：</b>{{model.organName}}</span>
                   <span><b>单据日期：</b>{{model.operTimeStr}}</span>
                   <span><b>订单编号：</b>{{model.number}}</span>
               </div>
               <div class="caption3">
                   <span><b>客户地址：</b>{{model.address}}</span>
                   <span><b>联系人：</b> {{model.contacts}}</span>
                   <span><b>联系电话：</b> {{model.telephone}}</span>
               </div>
                 <div class="table-wrap">
                   <table>
                     <thead>
                       <tr>
                           <th >序号</th>
                           <th>产品名称</th>
                           <th >规格</th>
                           <th >单位</th>
                           <th >数量</th>
                           <th >单价（元）</th>
                           <th >金额（元）</th>
                           <th >备注</th>
                         </tr>
                       </thead>
                       <tbody>
                         <tr v-for="(table,index) in tableData.slice((page-1)*pageSize,page*pageSize)" :key="index">
                           <td>{{index+1+(page-1)*pageSize}}</td>
                           <td>{{table.name}}</td>
                           <td>{{table.standard}}</td>
                           <td>{{table.unit}}</td>
                           <td>{{table.operNumber}}</td>
                           <td>{{table.unitPrice}}</td>
                           <td>{{table.allPrice}}</td>
                           <td>{{table.remark}}</td>
                         </tr>
                         <tr v-for="(table,index1) in indexData" :key="table" v-if="pageNum == page">
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                         </tr>
                       </tbody>
                       <tr v-if="pageNum == page">
                         <td class="table-title">合计</td>
                         <td colspan="3"></td>
                         <td class="table-value" style="text-align: center;">{{totalNum}}</td>
                         <td></td>
                          <td class="table-value" style="text-align: center;">{{totalPrice}}</td>
                          <td></td>
                       </tr>
                       <tr v-if="pageNum == page">
                         <td class="table-title" colspan="3">合计金额（大写）</td>
                         <td colspan="5" class="table-value" style="text-align: center;">{{totalPriceCap}}</td>
                       </tr>
                   </table>
                 </div>
                <div class="sumbox3">
                   <span><b>业务负责人：</b>{{model.salesManStr}}</span>
                   <span><b>仓管员：</b></span>
                   <span><b>客户签字：</b></span>
                 </div>
                 <div style="height: 50px;"  v-if="pageNum > page"></div>
              </div>
             </div>
            <div slot="footer" class="dialog-footer">
              <el-button style="margin-top: 12px;" v-print="'#printDetailXSTH'" type="warning">打 印</el-button>
              <el-button @click="printopen=false">取 消</el-button>
            </div>
         </template>
    </el-dialog>
  </div>
</template>

<script>
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import {
    getDetailList,
    findBillDetailByNumber
  } from "@/api/bill/retail";
  import { getInfoBytenantId } from "@/api/system/companyconfig";
  import {parseTime,capAmount} from "@/utils/ruoyi";
  import * as math from 'mathjs'
  export default {
    name: "BillDetail",
    data() {
      return {
        model: {},
        billType: '', //模板分类
        detailvisible: false,
        tableData: [],
        indexData:[],
        startIndex:2,
        title: '详情',
        printTitle:null,
        deptName:null,
        printopen :false,
        pageSize:10, //每页显示数量
        pageNum:1,//总得可分页数
        pageNumList:[],//
        contentHight:200,//内容高度
        style:{
          height:null
        }
      };
    },
    beforeCreate() {
      getInfoBytenantId().then(response =>{
        this.deptName = response.data.companyName;
      });
    },
    created() {

    },
    mounted() {

    },
    computed:{
      totalPrice(){
        const values = this.tableData.map(item => Number(item.allPrice));
           const total = values.reduce((prev, curr) => {
             const value = Number(curr);
             if (!isNaN(value)) {
               return  math.add(math.bignumber(prev),math.bignumber(curr));
             } else {
               return math.bignumber(prev);
             }
           }, 0);
          if(isNaN(total)){
            return 0
          }
        return math.format(total)
      },
      totalPriceCap(){
         const values = this.tableData.map(item => Number(item.allPrice));
         const total = values.reduce((prev, curr) => {
           const value = Number(curr);
           if (!isNaN(value)) {
             return  math.add(math.bignumber(prev),math.bignumber(curr));
           } else {
             return math.bignumber(prev);
           }
         }, 0);
         return capAmount(total)
      },
      totalNum(){
        const values = this.tableData.map(item => Number(item.operNumber));
        const total = values.reduce((prev, curr) => {
          const value = Number(curr);
          if (!isNaN(value)) {
            return  math.add(math.bignumber(prev),math.bignumber(curr));
          } else {
            return math.bignumber(prev);
          }
        }, 0);
        return total
      },
    },
    watch:{
      pageSize: function(n,o){
        this.indexData.length = 0;
        this.pageNum = Math.ceil(this.tableData.length/n) ;
        if(this.tableData.length<n * this.pageNum){
          let i =this.tableData.length+1;
          this.startIndex = this.tableData.length+1;
          while(i<=n * this.pageNum){
            // console.log(i)
            this.indexData.push(i);
            i++;
          }
        }
      },
      contentHight:function(n,o){
        this.style.height = n+"px";
      }
    },
    methods: {
      show(data, type) {
        this.billType = type
        this.model = Object.assign({}, data);
        console.log("=====")
        console.log(this.model)
         console.log("==@===")
        //收款金额
        if (this.model.backAmount) {
          this.model.getAmount = math.format(math.round(math.add(math.number(this.model.changeAmount) , math.number(this.model.backAmount)),2))
        } else {
          this.model.getAmount = math.format(math.round(math.number(this.model.changeAmount),2))
        }
        //本次欠款
        // this.model.debt = math.format(math.chain(math.number(this.model.discountLastMoney)).add(math.number(this.model.otherMoney)).subtract(math.number(this.model.changeAmount)).done())
        this.model.debt = math.format(math.round(math.chain(math.number(this.model.discountLastMoney)).add(math.number(this.model.otherMoney)).subtract(math.number(this.model.changeAmount)).done(),2))
        this.printTitle = this.deptName +" - " + type
        // this.tableData=datadata;
        let params = {};
        params.headerId = this.model.id;
        getDetailList(params).then(response => {
          // console.log(response.data)
          this.tableData = response.data;
        });

        this.detailvisible = true;
      },
      myHandleDetail(billNumber) {
        findBillDetailByNumber({
          number: billNumber
        }).then((res) => {
          let type = res.data.type === "其它" ? "" : res.data.type
          this.show(res.data, res.data.subType + type);
          this.title = res.data.subType + type + "-详情";
        })
      },
      openPrintDetail() {
        // console.log(this.indexData)
        this.indexData.length = 0;
        // this.pageNumList.length = 0;
        this.pageNum = math.ceil(math.divide(math.number(this.tableData.length), math.number(this.pageSize))) ;
        // console.log(this.pageSize+","+this.pageNum+"，"+this.tableData.length/this.pageSize+"，"+(this.tableData.length%this.pageSize>0?1:0))
        // let num = 1;
        // while(num<=this.pageNum){
        //   this.pageNumList.push(num);
        //   num++;
        // }
        if(this.tableData.length<this.pageSize * this.pageNum){
          let i =this.tableData.length+1;
          this.startIndex = this.tableData.length+1;
          while(i<=this.pageSize * this.pageNum){
            // console.log(i)
            this.indexData.push(i);
            i++;
          }
        }
        this.printopen = true;
      },
    }
  };
</script>
<style lang="less">
.print-wrap {
    width: 980px;
    color: #000000;
    margin-top: -5px;
    height: 693px;
    h1 {
      font-size: 23px;
      color: #000;
      font-weight: 600;
      // line-height: 30px;
      margin-top: 5px;
      margin-bottom: 12px;
      text-align: center;
      width: 100%;
    }

    .caption {
      display: flex;
      align-items: center;
      width: 100%;
      font-size: 15px;
      color: #000;
      line-height: 46px;
      padding-left:10px;
      span {
        display: block;
        width: 25%;

        &:nth-child(2) {
           width: 34%;
          text-align: left;
        }

        &:nth-child(3) {
           width: 34%;
          text-align: left;
        }

        &:nth-child(4) {
          text-align: right;
        }
      }
    }
    /** 3等分显示*/
    .caption3 {
      display: flex;
      align-items: center;
      width: 100%;
      font-size: 16px;
      color: #000;
      line-height: 46px;
      padding-left:10px;
      height: 38px;
      span {
        display: block;
        width: 33%;
        text-align: left;
      }
    }
    .table-wrap {
      table {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
        font-size: 20px;
        color: #000;
        border: 1px solid #0e0e10;

        .table-title{
          text-align: center;
          border: 1px solid #0e0e10;
          font-weight: 600;
        }
        .table-value{
           text-align: center;
          border: 1px solid #0e0e10;
        }
        /* border-left:none;
      border-right:none; */
        thead {
          border-bottom: 1px solid #0e0e10;

          th {
            height: 36px;
            font-weight: 600;
            border: 1px solid #0e0e10;
            font-size: 17px;
            background-color: #F1F3F6;
          }
        }

        tbody {
          td {
            text-align: center;
            height: 32px;
            border: 1px solid #0e0e10;
            font-size: 16px;
          }
        }
      }
    }

    .sumbox {
       display: flex;
       align-items: center;
       width: 100%;
       font-size: 15px;
       color: #000;
       line-height: 46px;
       padding-left: 10px;
       span {
         display: block;
         width: 25%;

         &:nth-child(2) {
           width: 34%;
           text-align: left;
         }

         &:nth-child(3) {
            width: 34%;
           text-align: left;
         }

         &:nth-child(4) {
           text-align: right;
         }
       }
    }
  /** 3等分显示*/
    .sumbox3 {
       display: flex;
       align-items: center;
       width: 100%;
       font-size: 16px;
       color: #000;
       line-height: 46px;
       span {
         display: block;
         width: 33%;
         text-align: left;
       }
    }
  }

  .printTitle > input{
        border: 0!important;
        text-align: center;
        font-size: 33px;
        font-weight: bolder;
        color: #000000;
        font-family: '黑体';
        // letter-spacing:10px;//间距
  }
  @media print{
      body{
        border: solid 1px #fff;
      }
    }
</style>
